<template>
    <div class="home">
        <Header head-title="消息中心" go-back="true"></Header>
        <section class="group">
            <img class="ImgNone" src="../../assets/img/voucher.png" alt="">
            <p class="fonts">您还没有任何消息通知</p>

<!-- <div>
    <p style="float:left;color:#319cfe; margin-right: 30px">
        <span>消费总额</span> <br />
        <span>1881.8899</span>
    </p>
    <p style="float:left;color:#00cc65; margin-right: 30px">
        <span>成功总额</span> <br />
        <span>1881.8899</span>
    </p>
    <p style="float:left; color:red">
        <span>失败总额</span> <br />
        <span>1881.8899</span>
    </p>
</div> -->

        </section>
        <section class="group">
            <section class="IconCom">
                <div class="IconLeft Select">
                    <div class="circle circle1"></div>
                    <h3 class="fontsM">消息提醒</h3>
                </div>
                <div class="InfoRight Select">
                    <div class="InfoLeft"></div>
                    <section class="right Info">
                        <p class="fonts">特朗普，请在2020-02-10 13:00前完成取号</p>
                        <p class="fonts">平顶山市第一人民医院 - 消化内科</p>
                        <div class="fontsMin right">
                          <p>2019-04-01 12:00:36</p>
                        </div>
                    </section>
                </div>
            </section>
            <section class="IconCom">
                <div class="IconLeft Select">
                    <div class="circle circle2"></div>
                    <h3 class="fontsM">消费提醒</h3>
                </div>
                <div class="InfoRight Select">
                    <div class="InfoLeft"></div>
                    <section class="right Info">
                        <p class="fonts">您在门诊缴费200元</p>
                        <p class="fonts">平顶山市第一人民医院 - 消化内科</p>
                        <div class="fontsMin right">
                          <p>2019-04-01 12:00:36</p>
                        </div>
                    </section>
                </div>
            </section>
            <section class="IconCom">
                <div class="IconLeft Select">
                    <div class="circle circle3"></div>
                    <h3 class="fontsM">充值提醒</h3>
                </div>
                <div class="InfoRight Select">
                    <div class="InfoLeft"></div>
                    <section class="right Info">
                        <p class="fonts">您的电子健康卡充值了500元</p>
                        <p class="fonts">平顶山市第一人民医院</p>
                        <div class="fontsMin right">
                          <p>2019-04-01 12:00:36</p>
                        </div>
                    </section>
                </div>
            </section>
            <section class="IconCom">
                <div class="IconLeft Select">
                    <div class="circle circle4"></div>
                    <h3 class="fontsM">系统通知</h3>
                </div>
                <div class="InfoRight Select">
                    <div class="InfoLeft"></div>
                    <section class="right Info">
                        <p class="fonts" :class=" more ? 'InfoP':'InfoPA' ">平顶山市第一人民医院消化内科，张一元代大夫停止通知，平顶山市第一人民医院消化内科，张一元代大夫停止通知，平顶山市第一人民医院消化内科，张一元代大夫停止通知，平顶山市第一人民医院消化内科，张一元代大夫停止通知，平顶山市第一人民医院消化内科，张一元代大夫停止通知</p>
                        <p class="fonts activecolor right" @click="More()">
                            {{ more ? "展开全部" : '点击收起' }}
                        </p>
                        <p class="fonts infoTitle">平顶山市第一人民医院</p>
                        <div class="fontsMin right">
                          <p>2019-04-01 12:00:36</p>
                        </div>
                    </section>
                </div>
            </section>
        </section>
    </div>
</template>

<script>
import Header from '../../components/Header'
export default {
  data () {
    return {
      more: true
    }
  },
  components: {
    Header
  },
  mounted () {

  },
  methods: {
    More () {
      this.more = !this.more
    }
  }
}
</script>

<style scoped>
.home {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 0.8rem;
    overflow-y: auto;
}
</style>
